<template>
	<body>
	<header>
		<ul class="table">
			<li ><h4>话题</h4><span class="items" ></span></li>
			<li><h4>关注</h4><span class="items" style="display: block;"></span></li>
		</ul>
	</header>
		<div class="tab_main">
			<div class="item container" style="display: none;">
				<a href="../课程详情和课程参数/index.html">
					<div class="to1">
						<div class="to1_header">
							<div class="to1_header_left">
								<figure>
									<span><img src="./img/touxiang11.png" ></span>
									<h4>攻城狮圈子</h4>
								</figure>
							</div>
							
							<div class="to1_header_right">
								<figure>
									<h4>+ 关注</h4>
									<span></span>
								</figure>
							</div>
						</div>
						<div class="to1_body">
							<div class="to1_body_left">
								<div class="to1_body_left_top">
									论互联网的加班浪潮，对于零零七和九九六你有什么看法？省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字
								</div>
								<div class="to1_body_left_bottom">
									某某描述年轻人可能会更多选择高薪省略一万字省略一万字省略一万字省略一万字
								</div>
							</div>
							<div class="to1_body_right"><img src="./img/course2.png" ></div>
						</div>
					</div>
				</a>
				<div class="to1">
					<div class="to1_header">
						<div class="to1_header_left">
							<figure>
								<span><img src="./img/touxiang2.png" ></span>
								<h4>成功法则</h4>
							</figure>
						</div>
						
						<div class="to1_header_right">
							<figure>
								<h4>+ 关注</h4>
								<span></span>
							</figure>
						</div>
					</div>
					<div class="to1_body">
						<div class="to1_body_left">
							<div class="to1_body_left_top">
								怎么样才能月薪上万，走向成功，达到“睡后”收入实现不上班愿望？
							</div>
							<div class="to1_body_left_bottom">
								首先要学会理财，积攒第一笔启动资金才有有有有
							</div>
						</div>
						<div class="to1_body_right"><img src="./img/course1.png" ></div>
					</div>
				</div>
				<div class="to1">
					<div class="to1_header">
						<div class="to1_header_left">
							<figure>
								<span><img src="./img/touxiang2.png" ></span>
								<h4>爱美人人需要</h4>
							</figure>
						</div>
						
						<div class="to1_header_right">
							<figure>
								<h4></h4>
								<span></span>
							</figure>
						</div>
					</div>
					<div class="to1_body">
						<img src="./img/shipin.png" alt="">
					</div>
					<p>每天进行10分钟按摩保证一整天精神</p>
				</div>
				<div class="to1">
					<div class="to1_header">
						<div class="to1_header_left">
							<figure>
								<span><img src="./img/touxiang2.png" ></span>
								<h4>成功法则</h4>
							</figure>
						</div>
						
						<div class="to1_header_right">
							<figure>
								<h4>+ 关注</h4>
								<span></span>
							</figure>
						</div>
					</div>
					<div class="to1_body">
						<div class="to1_body_left">
							<div class="to1_body_left_top">
								怎么样才能月薪上万，走向成功，达到“睡后”收入实现不上班愿望？
							</div>
							<div class="to1_body_left_bottom">
								首先要学会理财，积攒第一笔启动资金才有有有有
							</div>
						</div>
						<div class="to1_body_right"><img src="./img/course1.png" ></div>
					</div>
				</div>
				<div class="to1">
					<div class="to1_header">
						<div class="to1_header_left">
							<figure>
								<span><img src="./img/touxiang2.png" ></span>
								<h4>成功法则</h4>
							</figure>
						</div>
						
						<div class="to1_header_right">
							<figure>
								<h4>+ 关注</h4>
								<span></span>
							</figure>
						</div>
					</div>
					<div class="to1_body">
						<div class="to1_body_left">
							<div class="to1_body_left_top">
								怎么样才能月薪上万，走向成功，达到“睡后”收入实现不上班愿望？
							</div>
							<div class="to1_body_left_bottom">
								首先要学会理财，积攒第一笔启动资金才有有有有
							</div>
						</div>
						<div class="to1_body_right"><img src="./img/course3.png" ></div>
					</div>
				</div>
				<div class="to1">
				<div class="to1_header">
					<div class="to1_header_left">
						<figure>
							<span><img src="./img/touxiang2.png" ></span>
							<h4>成功法则</h4>
						</figure>
					</div>
					
					<div class="to1_header_right">
						<figure>
							<h4>+ 关注</h4>
							<span></span>
						</figure>
					</div>
				</div>
				<div class="to1_body">
					<div class="to1_body_left">
						<div class="to1_body_left_top">
							怎么样才能月薪上万，走向成功，达到“睡后”收入实现不上班愿望？
						</div>
						<div class="to1_body_left_bottom">
							首先要学会理财，积攒第一笔启动资金才有有有有
						</div>
					</div>
					<div class="to1_body_right"><img src="./img/course4.png" ></div>
				</div>
			</div>
			</div>
			<div class="item container"  style="display: block;">
				<div class="to1">
					<div class="to1_header">
						<div class="to1_header_left">
							<figure>
								<span><img src="./img/touxiang11.png" ></span>
								<h4>攻城狮圈子</h4>
							</figure>
						</div>
						
						<div class="to1_header_right">
							<figure>
								<h4>+ 关注</h4>
								<span></span>
							</figure>
						</div>
					</div>
					<div class="to1_body">
						<div class="to1_body_left">
							<div class="to1_body_left_top">
								论互联网的加班浪潮，对于零零七和九九六你有什么看法？省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字
							</div>
							<div class="to1_body_left_bottom">
								某某描述年轻人可能会更多选择高薪省略一万字省略一万字省略一万字省略一万字
							</div>
						</div>
						<div class="to1_body_right"><img src="./img/course2.png" ></div>
					</div>
				</div>
				<div class="to1">
					<div class="to1_header">
						<div class="to1_header_left">
							<figure>
								<span><img src="./img/touxiang2.png" ></span>
								<h4>成功法则</h4>
							</figure>
						</div>
						
						<div class="to1_header_right">
							<figure>
								<h4>+ 关注</h4>
								<span></span>
							</figure>
						</div>
					</div>
					<div class="to1_body">
						<div class="to1_body_left">
							<div class="to1_body_left_top">
								怎么样才能月薪上万，走向成功，达到“睡后”收入实现不上班愿望？
							</div>
							<div class="to1_body_left_bottom">
								首先要学会理财，积攒第一笔启动资金才有有有有
							</div>
						</div>
						<div class="to1_body_right"><img src="./img/course5.png" ></div>
					</div>
				</div>
				<div class="to3">
					<div class="to3_header">
						<div class="to3_header_left">
							<h2>名师</h2>
							<h4>TEATHER</h4>
						</div>
						<div class="to3_header_right"></div>
					</div>
					<div class="to3_body">
						<div class="to3_body_item"  v-for="(item,index) in bookData.list" :key="index">
							<div class="touxiang"><img :src= "item.teacher"></div>
							<h1>{{ item.name }}</h1>
							<p>{{ item.introduce }}</p>
							<span>{{ item.status }}</span>
						</div>
						
					</div>
				</div>
				<div class="to1">
					<div class="to1_header">
						<div class="to1_header_left">
							<figure>
								<span><img src="./img/touxiang11.png" ></span>
								<h4>攻城狮圈子</h4>
							</figure>
						</div>
						
						<div class="to1_header_right">
							<figure>
								<h4>+ 关注</h4>
								<span></span>
							</figure>
						</div>
					</div>
					<div class="to1_body">
						<div class="to1_body_left">
							<div class="to1_body_left_top">
								论互联网的加班浪潮，对于零零七和九九六你有什么看法？省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字
							</div>
							<div class="to1_body_left_bottom">
								某某描述年轻人可能会更多选择高薪省略一万字省略一万字省略一万字省略一万字
							</div>
						</div>
						<div class="to1_body_right"><img src="./img/course3.png" ></div>
					</div>
				</div>
				<div class="to1">
					<div class="to1_header">
						<div class="to1_header_left">
							<figure>
								<span><img src="./img/touxiang11.png" ></span>
								<h4>攻城狮圈子</h4>
							</figure>
						</div>
						
						<div class="to1_header_right">
							<figure>
								<h4>+ 关注</h4>
								<span></span>
							</figure>
						</div>
					</div>
					<div class="to1_body">
						<div class="to1_body_left">
							<div class="to1_body_left_top">
								论互联网的加班浪潮，对于零零七和九九六你有什么看法？省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字
							</div>
							<div class="to1_body_left_bottom">
								某某描述年轻人可能会更多选择高薪省略一万字省略一万字省略一万字省略一万字
							</div>
						</div>
						<div class="to1_body_right"><img src="./img/course2.png" ></div>
					</div>
				</div>
			</div>
			</div>
		<div class="footer container">
				<ul>
					<li>
						<a @click="toIndex()">
							<span>&#xe751;</span>
							<span>首页</span>
						</a>
					</li>
					<li>
						<a @click="toCourse()">
							<span>&#xe614;</span>
							<span>课程</span>
						</a>
					</li>
					<li>
						<a @click="toHuati()">
							<span>
								&#xe630;
							</span>
							<span>话题</span>
						</a>
					</li>
					<li>
						<a @click="toMyUser()">
							<span>&#xe600;</span>
							<span>我的</span>
						</a>
					</li>
				</ul>
			</div>
	</body>
</template>


<script setup>
import './img/touxiang3.png'
import './css/style.css'
import './iconfont/iconfont.css'
import './js/flexible.js'





import request from "../../axios/request.js";
import { useRouter } from 'vue-router'
const router = useRouter()
const toIndex=()=>{
	router.push('/index')
}

const toCourse=()=>{
	router.push('/course')
}

const toHuati=()=>{
	router.push('/huati')
}

const toMyUser=()=>{
	router.push('/myuser')
}

import { reactive, onMounted } from "vue";
  const bookData = reactive({
    list: [],
  });
  onMounted(() => {
    getData();
	console.log(bookData.list)
  });

 // 测试请求方法
 const getData = () => {
    request({
      // url: "/mock/getBooks",
      url: "http://127.0.0.1:8081/interests",
      method: "get",
    })
      .then((res) => {
        bookData.list = res.data;
		console.log(bookData.list)
        console.log(res);
      })
      .catch((error) => {
        console.log(error);
      });
  };


</script>

